{% extends 'base.html' %}

{% block title %}Music Box - About{% endblock %}

{% block content %}
    <div class="about-container">
        <h1>
            <i class="fas fa-info-circle mr-2"></i>About Music Box
        </h1>

        <p>
            Music Box is a simple music website built with Python Flask framework.
            It's designed for Python beginners to learn web development concepts.
        </p>

        <div class="row mt-5">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-list-music"></i>
                    </div>
                    <h3>Music List</h3>
                    <p>Browse through our collection of music and discover new tracks.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <h3>Music Player</h3>
                    <p>Play your favorite music with our easy-to-use player.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3>Responsive Design</h3>
                    <p>Enjoy music on any device with our responsive design.</p>
                </div>
            </div>
        </div>

        <div class="mt-5">
            <h3>
                <i class="fas fa-code mr-2"></i>Built With
            </h3>
            <ul class="list-group list-group-flush mt-3">
                <li class="list-group-item bg-transparent border-0">
                    <i class="fab fa-python mr-2 text-primary"></i>Python
                </li>
                <li class="list-group-item bg-transparent border-0">
                    <i class="fas fa-flask mr-2 text-primary"></i>Flask
                </li>
                <li class="list-group-item bg-transparent border-0">
                    <i class="fab fa-html5 mr-2 text-primary"></i>HTML5
                </li>
                <li class="list-group-item bg-transparent border-0">
                    <i class="fab fa-css3-alt mr-2 text-primary"></i>CSS3
                </li>
                <li class="list-group-item bg-transparent border-0">
                    <i class="fab fa-js mr-2 text-primary"></i>JavaScript
                </li>
                <li class="list-group-item bg-transparent border-0">
                    <i class="fas fa-bootstrap mr-2 text-primary"></i>Bootstrap 5
                </li>
            </ul>
        </div>
    </div>
{% endblock %}
